公司新起了一个项目，前端页面写的差不多了，后台也整理好接口文档开始对接了，get请求对接没有出现什么问题，跨域问题使用vite的server-proxy轻松解决。但是对接到post请求的接口时出现了问题。报了403错误：

并且怪异的地方是：使用apifox模拟调用是成功的，但是使用前端本地使用axios调用就是报错，刚开始我想着本着先分析排查自己的问题，搜了很多，也尝试改了很多配置，都不行。最终经过和之前项目的请求数据做对比，发现了细微差别：

对，就是这两个参数： Access-Control-Allow-Origin和Access-Control-Allow-Credentials

这里先科普一下这两个参数：

Access-Control-Allow-Origin 是一个 CORS（跨域资源共享）相关的响应头部字段。它用于指示服务器允许哪些源（域名）可以访问该资源的响应。

CORS 是一种用于解决浏览器跨域请求的安全机制。当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS 请求）给服务器，询问服务器是否允许该跨域请求。服务器通过设置响应头部字段来控制是否允许跨域请求，其中之一就是 Access-Control-Allow-Origin。

Access-Control-Allow-Origin 可以有以下取值：

服务器应根据安全需求来设置适当的 Access-Control-Allow-Origin 值，以确保只有经过授权的域名可以访问资源。如果服务器未正确配置 Access-Control-Allow-Origin，浏览器会拒绝接收该跨域请求，并返回相应的错误信息（例如 403 Forbidden 错误）。

请注意，Access-Control-Allow-Origin 是服务器端设置的响应头部字段，因此你无法在客户端（如前端代码中）直接修改它。如果你遇到 CORS 相关的问题，应该联系服务器管理员或接口提供方，了解他们的跨域配置，并根据需要进行相应的调整。

Access-Control-Allow-Credentials 是一个响应头，用于指示服务器是否允许浏览器发送包含凭据（如 cookies、HTTP 认证信息等）的跨域请求。

该响应头有两个可能的取值：

如果服务器返回 Access-Control-Allow-Credentials: true，则浏览器可以发送带有凭据的跨域请求。如果服务器返回 Access-Control-Allow-Credentials: false 或者不返回该响应头，浏览器会阻止发送包含凭据的跨域请求。

需要注意的是，当 Access-Control-Allow-Credentials 设置为 true 时，Access-Control-Allow-Origin 响应头不能设置为通配符 *，而必须指定具体的允许跨域请求的源。

起因：由于在自定义请求头后请求会从简单请求转变为复杂请求，复杂请求会提前发送一个预检请求与服务器进行沟通，大概类似于（预检请求：“我可以访问吗？”=> 服务器：“可以” =>真实请求） 这里，就是因为axios的预检请求失败（当使用某些自定义请求头或特殊请求方法时，浏览器会发送预检请求（OPTIONS）来确认服务器是否支持该请求。如果预检请求返回 403 错误，会导致后续实际请求被阻止。） 如果仅仅在header里面加入： 'Access-Control-Allow-Origin'：*' 是不能解决问题的 报错就是刚开始那张403报错

解决方法就是后端配置Access-Control-Allow-Credentials为true,而不是使用Access-Control-Allow-Origin为通配符，然后配置跨域白名单，Response Headers返回以下结果就可以了